<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>在线销售地图</title>
    <link rel="stylesheet" href="../css/map.css" type="text/css">
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">

    <script src="../js/jquery.min.js"></script>
    <script language="JavaScript" src="../js/bootstrap.min.js"></script>
    <style type="text/css" >
        html,
        body,
        #container {
            font-family: 微软雅黑;
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        tr.amap-info-tabs{ display: none!important; }
        .nav-icon, .nav-drive{ display: none!important; }
        .input-label{ display: none!important; }
        .amap-copyright{ display: none!important; }
        .amap-logo{ display: none!important; }

        a:link,a:visited{
            text-decoration:none;  /*超链接无下线*/
        }

    </style>

</head>


<body style="padding:0px;margin:0px">

<div class="container" style="margin:0px; width:100%; padding:0px">
    <div class="header" style="height: 10%; padding-bottom: 10px">
        <h2 style="    margin: 0;
    padding-top: 35px;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 111;
    top: 0;
    left: 0;
    right: 0;">销售地图 </h2>
    </div>

    <div class="main" style="height: 90%;" id="container">
        <!--        <input type="button" class="button" value="打开信息窗体" onClick="javascript:openInfo()"/>-->
        <div class="ditu-daoright ditu-daoright2" style="min-height:50px">
            <input type="text" name="key"  placeholder="请输入关键词" id="scity">
            <span class="rig-search" id="J_search"></span>

        </div>
        <div class="C_navlist">
            <div class="C_nvbox C_nalall Cdlis">
                <div class="C_nals">
                    <span class="C_anic"></span> 全部
                </div>
            </div>

            <div class="C_nvbox ">

                <div class="C_nals">
                    <span class="C_anic C_anic1"></span> 超市
                    <div class="C_numl"><span>0</span>家</div>
                </div>


            </div>
            <div class="C_nvbox ">

                <div class="C_nals">
                    <span class="C_anic C_anic2"></span> 机构

                    <div class="C_numl"><span>15</span>家</div>
                </div>

            </div>
            <div class="C_nvbox C_nvbpon ">

                <div class="C_nals">
                    <span class="C_anic C_anic3"></span> 企业

                    <div class="C_numl"><span>80</span>家</div>
                </div>
            </div>
            <div class="C_nvbox C_nvbpon ">

                <div class="C_nals">
                    <span class="C_anic C_anic4"></span>其它

                    <div class="C_numl" style="visibility: hidden"><span>xxx</span>家</div>
                </div>
            </div>
        </div>
        <div class="C_zlist zsbig2" >
            <div class="righbon"style="margin-bottom: 20px" id="J_mapleft" >◀</div><div class="C_topall">当前有<span class="J_num" id="allNum">158</span>家</div>
            <div class="C_liboxs" id="C_liboxs">



            </div>
            <div style="color:#666;font-size: 12px;padding: 10px;padding-top: 20px">
                <p style="float:left;;"  id="pagemsg"></p>
                <p style="float: right"><span class="page"  id="fpbtn">首页</span><span class="page big" id="rpbtn"> ‹ </span><span class="page big" id="npbtn"> › </span><span class="page" id="lpbtn">尾页</span></p>
            </div>


        </div>
    </div>
</div>
    
<!-- 模态框（Modal） -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">数据详情</h4>
            </div>
            <div class="modal-body" style="min-height:500px;padding-top:0px">
                <div style="height:200px" id="view1">
                    <table class="table">
                      <caption>交易详情列表</caption>
                      <thead>
                        <tr>
                          <th>流水号</th>
                          <th>金额</th>
                          <th>时间</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                          <td>1936.27</td>
                          <td>2018-6-6 19:06</td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>2096.50</td>    
                          <td>2018-6-6 20:08</td>
                        </tr>
                        <tr>
                          <td>3</td>
                          <td>24085</td>    
                          <td>2018-6-6 23:08</td>
                        </tr>
                      </tbody>
                    </table>
                </div>
                <div style="height:250px" id="view2"></div>
                <div style="height:250px" id="view3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
    
<!--<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.6&key=17cc15a8dd6241aa1984495c67d70e6f'></script>-->
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/maps?v=1.4.2&key=17cc15a8dd6241aa1984495c67d70e6f"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="https://webapi.amap.com/js/marker.js"></script>
<script src="../js/viewS.js"></script>
<script src="../js/data.js"></script>
<script language="JavaScript" src="../js/echarts.min.js"></script>
<script language="JavaScript" src="../js/public.js"></script>    
    
<script type="text/javascript">
    function cout(obj){ console.log(obj); }
    
    function openModal(name){
        $("#modal1").modal("show");
        $("#myModalLabel").text(name + " 数据详情");
        
    }
    $('#modal1').on('shown.bs.modal', function () {
        drawBar("view2");
        drawLine("view3");
    })
    
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 14,
        center:[110.353031,20.023766]
    });
    var Markers = {};     // name: marker
    var infowindow = null;
    // just some colors
    var colors = [
        "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
        "#651067", "#329262", "#5574a6", "#3b3eac"
    ];
    var dataList = getPointReal();

    function initPage(PointSimplifier,SimpleInfoWindow, $) {

        // js中模拟数据
        loadPoints(dataList);
        // 新增基于商圈随机模拟数据
        loadPlaces(function(ds){
            loadPoints(ds, 1);
            
        });
        
        AMap.plugin('AMap.AdvancedInfoWindow',function(){
            infowindow = new AMap.AdvancedInfoWindow({
                isCustom : true,
                content: '<div></div>',
                offset: new AMap.Pixel(0, -30)
            });
            $(document).on('click.sh_boxhide','div.sh_boxhide',function (e) {
                infowindow.close();
            });
        });

        //// 模板复用
        function getContent(name, address, phone, status){
            var imgUrl = 'imgs/company.jpg';
            var addr = address;
            return '<div class="sh_boxmn"><div class="sh_boxhide">×</div><div class="sh_mation"><h1>'
                    + name+'</h1></div>' +
                    '<dl class="sh_dlsm"><dt><img src="'+ imgUrl +'" alt="'+ name +'"></dt>' +
                    '<dd><p>地址：'+ addr +'</p><p>商户代码：'+ phone +'</p><p>商户状态：'+ status +'</p></dd></dl>' +
                    '<div class=""><a onclick="openModal(\''+ name + '\')"><button>查看商户详情</buton></a>' +
                    '</div></div>'
        }

        //--------------------------数据-------------------------------
        function loadPoints(points, style) {
            var ico = style==undefined ? 'dollar' : 'home';
            var size = style==undefined ? 24 :20;
            points.forEach(function (d, i) {
                var ps = d[4].split(",");
                var x = ps[0], y = ps[1];
                var icon = new AMap.Icon({
                    image: './imgs/'+ ico +'.png', imageSize: new AMap.Size(25, 25)
                });
                marker = new AMap.Marker({
                    icon: icon,
                    size: new AMap.Size(size, size),
                    imageSize: new AMap.Size(size, size),
                    position: [x, y],
                    zIndex: 10,
                    title: d[0],
                    map: map,
                    topWhenMouseOver:true,
                    animation:'AMAP_ANIMATION_DROP',
                    // offset: new AMap.Pixel(-5, -2)
                });
                marker.content = getContent(d[0], d[2], d[3], d[1]);

                marker.on('click',function(e){
                    infowindow.setContent(e.target.content);
                    infowindow.open(map, e.target.getPosition());
                });

                Markers[d[0]] = marker;
            });

        }
    }

    function clickItem(name){
        infowindow.setContent(Markers[name].content);
        infowindow.open(map, Markers[name].getPosition());
    }

    //---------------------------------------商圈轮廓------------------------------------------------
    
    function getMaxMin(pList){
        var minX = 0, minY = 0, maxX = 0, maxY = 0; 
        pList.forEach(function(d, i){
            if(i==0){
                [minX, maxX, minY, maxY] = [d.lng, d.lng, d.lat, d.lat];
            }
            else {
                if(d.lng<minX)minX = d.lng;
                if(d.lng>maxX)maxX = d.lng;
                if(d.lat<minY)minY = d.lat;
                if(d.lat>maxY)maxY = d.lat;
            }
        });
        return [minX, minY, maxX, maxY, maxX - minX, maxY - minY];
    }
    
    function loadPlaces(callback){
        var places = [],
        //getPlaces(), 
            outLines = {};//getOutline();
        var dtList = {}, lsDts = [];
        places.forEach(function(p){
            if(p[0] in outLines){
                dtList[p[0]] = [];
                var polygon = new AMap.Polygon({
                    path: outLines[p[0]],   //设置多边形边界路径
                    strokeColor: "#FF33FF", //线颜色
                    strokeOpacity: 0.2,     //线透明度
                    strokeWeight: 3,        //线宽
                    // fillColor: "#1791fc",   //填充色
                    fillColor: "#f00",   //填充色
                    fillOpacity: 0.55,      //填充透明度
                    zIndex: 9999
                });
                polygon.setMap(map);
                var rm = getMaxMin(outLines[p[0]]);

                for(var j=0; j<15; j++){
                    var pt = [Math.random() * rm[4] + rm[0], Math.random() * rm[5] + rm[1]];
                    if(!rayCasting(pt, outLines[p[0]])) continue;
                    
                    var pName = "商圈" + p[1] + (j + 1) + "号店(测试数据)";
                    var pAddr = "海口市" + p[1], pos = pt[0] + "," + pt[1];
                    var pId = p[0] + "10" + j;
                    line = [pName, "1", pAddr, pId, pos];
                    // dtList[p[0]].push(line);
                    lsDts.push(line);
                    dataList.push(line);
                }
                
                polygon.on("click", function(d){
                    cout(dtList[p[0]]);
                });
            }
        });
        
        if(callback)callback(lsDts);
        $("#allNum").html(dataList.length);
    }
    
    



    //------------------------------------------------------------------------------------------
    AMapUI.load(['ui/misc/PointSimplifier','ui/overlay/SimpleInfoWindow', 'lib/$'], function(PointSimplifier,SimpleInfoWindow, $) {

        if (!PointSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        initPage(PointSimplifier,SimpleInfoWindow, $);
    });

    var pagenum = 1;
    var all = 158;
    $(function () {
        $(document).keyup(function(event) {
            if (event.keyCode == 13) {
                $("#J_search").trigger("click");
            }
        });
        /*搜索*/
        $("#J_search").click(function () {
            var val =$("#scity").val().trim();
            if(val){
                var arr =[];
                $.each(dataList, function (i, v) {
                    if(v[0].indexOf(val)!=-1 || v[3].indexOf(val) !=-1){
                        arr.push(v);
                    }
                });

                all = arr.length;
                pagenum = 1;
                dolistpage(arr.length,pagenum,5,arr);

                loadData(pagenum,arr);
            }else{
                all = 158;
                pagenum = 1;
                dolistpage(all,pagenum,5,dataList);
                loadData(pagenum,dataList)
            }
        });

        /*列表展开*/
        $("#J_mapleft").click(function () {
            $(this).toggleClass('nn')
            if($(this).hasClass('nn')){
                $(this).parent('.C_zlist').removeClass('zsbig2').addClass('zsbig');
            }else{
                $(this).parent('.C_zlist').removeClass('zsbig').addClass('zsbig2');
            }

        });


    });


    dolistpage(all,pagenum,5,dataList);
    loadData(pagenum,dataList);

    function loadData(pagenum,dataList) {
        if(pagenum <0 || pagenum == 0){
            pagenum = 1;
        }
        var list = dataList.slice((pagenum-1)*5,pagenum*5)
        var str = '';
        $.each(list,function (a,b) {
            var index =a+1;
            str+= '<a href="javascript:clickItem('+ "'" + b[0] + "'" +');" > <div class="C_boxsmall"><div class="C_linum">'+index+'</div> <div class="C_listnv"> <h1>'+b[0]+'</h1> <div class="C_licts"> <h2><em class="C_on1"></em>'+ b[3] + " 地址：" + b[2]+'</h2> </div> </div> </div> </a>'
        });
        $("#C_liboxs").empty().append(str);
        $(".J_num").text(all);
        $("#pagemsg").html("当前" + pagenum + "/" +all);
    }

    function dolistpage(all,pagenum,pageCount,data){
        var total = (all % pageCount === 0) ? all / pageCount : (all / pageCount + 1);
        $("#fpbtn").click(function(){
            pagenum = 1
            loadData(pagenum,data);
        });

        $("#lpbtn").click(function(){
            pagenum = total

            loadData(parseInt(pagenum),data);
        });
        $("#rpbtn").click(function(){
            pagenum = pagenum - 1

            loadData(pagenum,data);
        });
        $("#npbtn").click(function(){
            if ((pagenum + 1) >= total){
                pagenum =1;
                loadData(pagenum,data);
            }

            else
                pagenum = pagenum+1
            loadData(pagenum,data);
        });

    }
</script>
</body>

</html>